<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="隐私设置"> </mh-header>
      <div class="set-form">
        <div class="set-li border-top">
          <div class="link-li">
            <span>通过附近的人看到我</span>
            <label class="check"><input type="checkbox" checked="checked" v-model='mes'><em></em></label>
          </div>
        </div>
        <div class="set-li">
          <div class="link-li">
            <span>通过二度好友看到我</span>
            <label class="check"><input type="checkbox" checked="checked" v-model='like'><em></em></label>
          </div>
        </div>
        <div class="set-li">
          <router-link class="link-li" :to="{path: '/setDark'}">
            <span>黑名单</span>
            <span class="rg">></span>
          </router-link>
        </div>
      </div>

    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "setting",
    data () {
      return {
        mes: 1,
        like: 1,
        see: 1,
        night: 1,
        talk: 1,
      }
    },
    methods: {
      getVal(e,type){
        console.log(e.target.value)
      },
      submit(){
        let self = this;
        MH_API.setMoney({
          hongbao: self.envelope,
          dashang: self.singleReward,
          caiyi: self.talentReward
        }).then(res => {
          if (res.status === 200) {
            mui.toast("设置成功");
            setTimeout(function(){
              self.$router.back(-1);
            }, 1500)
            
          }
          else{
            mui.toast(res.msg)
          }
        })
      }
    },
    components: {
      MhHeader
    },
    watch: {
      mes(value) {
        if(value){
          console.log(1)
        }
      },
      like(value) {
        if(value){
          console.log(2)
        }
      }
    }
  }
</script>

<style scoped>
  .set-form{ display: block; background-color: #fff; }
  .set-li{ display: block; }
  .border-top{ border-top: 1rem solid #F2F2F2;}
  .link-li{ display: flex; margin: 0 1.5rem; height: 5rem; justify-content: space-between; align-items: center; font-size: 1.4rem; border-bottom: 1px solid #eee;}
  .link-li .rg{ color: #999; }
  .check{ display: inline-block; width: 5rem; height: 2.5rem; border-radius: 2.5rem; overflow: hidden;}
  .check input{ display: none; }
  .check input + em{ background-color: #F2F2F2; display: block; height: 2.5rem; position: relative;}
  .check input + em::after{ content: ''; position: absolute; top: 0.1rem; right: 0.1rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; background-color: #fff;}
  .check input:checked + em{ background-color: #5AD476;}
  .check input:checked + em::after{ left: 0.1rem; }

</style>
